<template>
    <div class="barWrap" ref="piebox" ></div>
</template>

<script>
import echarts from '../../utils/echarts'

export default {
  data() {
    return {
        optionSet: {
        color: ['#35b2fa', '#f77c82','#6981f4','#506afb','#48d69b'],
        //   title: {
        //     text: this.title+'数量统计',
        //     subtext: '',
        //     left: 'left',
        //     color: '#999'
        // },
        textStyle: {
            color: '#999'
        },
        legend: {
          show:false,
          // orient: 'vertical',
          // left: 10,
          data: []
          // ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: {
            name: this.title,
            type: 'pie',
            // radius: '70%',
            // center: ['50%', '50%'],
            radius: ['50%', '70%'],
            // roseType: 'radius',
            label: {
              formatter: '{b}: {d}%'
                // normal: {
                //     show: false,
                //     position: 'center'
                // },
                // emphasis: {
                //     show: true,
                //     textStyle: {
                //         fontSize: '14',
                //         fontWeight: 'normal'
                //     }
                // }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
            // animationType: 'scale',
            // animationEasing: 'elasticOut',
            // animationDelay: function () {
            //     return Math.random() * 200;
            // },
            data: [].sort(function (a, b) { return a.value - b.value; }),
        }
      }
    };
  },
  props: {
    orderTypeList: {
      type: Array,
      detail: []
    },
    title: {
      type: String,
      detail: ""
    }
  },
  mounted() {
    //   console.log(999)
    // if (this.xLine && (this.xLine.length>0)) {
        // this.canvasAction()
    // }
  },
  methods: {
      getOrderTypeList(){
        this.optionSet.series.data = []
        this.optionSet.legend.data = []
        this.orderTypeList.forEach(element => {
          this.optionSet.series.data.push({
            value: element.totalAmount,
            name: element.payTypeFlag
          })
          this.optionSet.legend.data.push(element.payTypeFlag)
        });
        // this.optionSet.legend.data
        // this.optionSet.series.data = this.dataList
        this.myChart = echarts.init(this.$refs.piebox)
        this.myChart.setOption(this.optionSet)
        window.onresize = this.myChart.resize;
      }
  },
  watch: {
    orderTypeList: function(newData) {
      if(newData.length>0){
        this.getOrderTypeList()
      }
    }
  }
};
</script>

<style lang="less" scoped>
   .barWrap{
      //  width: calc(100vw - 360px);
       height: 320px;
   }
</style>